<template>
  <div>
    <Modal
      :value="modalState"
      :mask-closable="false"
      :closable="false"
      :loading="loading"
      :title="title"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="40%">
      <Form
        ref="passwordModal"
        :model="form">
        <div style="margin-left: 60px; margin-top: 40px;">
          <FormItem prop="password" style="width: 300px; margin-top: -20px">
            <span style="font-size: 14px;">密码：</span>
            <Input v-model="form.password" style="margin-left: 100px; margin-top: -60px;" type="text" placeholder="请输入密码" />
          </FormItem>
        </div>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'PasswordModal',
  data () {
    return {
      title: '',
      loading: true,
      form: {
        password: ''
      }
    }
  },
  updated () {
    this.title = '修改密码'
  },
  computed: {
    ...mapState({
      row: state => state.account.row,
      modalState: state => state.modal.passwordModalState,
      roleList: state => state.role.roleList
    })
  },
  methods: {
    ...mapActions(['updatePasswordModalState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.passwordModal.validate((valid) => {
        if (valid) {
          this.$emit('password-valid', {
            password: this.form.password
          })
        }
      })
    },
    cancel () {
      this.updatePasswordModalState(false)
      this.$refs['passwordModal'].resetFields()
    }
  }
}
</script>
